<template>
    <h3 class="text-base font-bold mt-[15px]">
        <span>模型选择</span>
    </h3>

    <!--    模型    -->
    <div class="flex mt-[5px] justify-evenly">
        <div
            v-for="item in modelList"
            :key="item.name"
            class="model-item"
            :class="{
                'model-item_active': currentModel === item.value
            }"
            @click="changeVersion(item.value)"
        >
            <div
                class="model-item-bg"
                :style="{
                    'background-image': `url(${item.background})`
                }"
            >
                <span class="text-base">{{ item.name }}</span>
                <span class="text-xs">{{ item.desc }}</span>
            </div>
        </div>
    </div>

    <!--    版本选择    -->
    <div class="mt-[10px] flex items-center">
        <div class="mr-[10px] text-base">版本选择</div>
        <el-select v-model="value.version" placeholder="请选择版本" class="flex-1">
            <el-option
                v-for="(item, key) in appStore?.getDrawConfig?.mj_version[
                    currentModel
                ]"
                :key="item"
                :label="item"
                :value="key"
            />
        </el-select>
    </div>

    <!--    风格选择    -->
    <div v-if="currentModel === 'niji'" class="mt-[10px] flex items-center">
        <div class="mr-[10px] text-base">风格选择</div>
        <el-select v-model="value.style" placeholder="请选择风格" class="flex-1">
            <el-option
                v-for="(item, key) in appStore?.getDrawConfig?.mj_style"
                :key="item"
                :label="item"
                :value="key"
            />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { useAppStore } from '~/stores/app'
import { useVModels } from '@vueuse/core'
import Mj from '~/assets/images/drawing/mj.png'
import Nj from '~/assets/images/drawing/nj.png'

const appStore = useAppStore()
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any
    }>(),
    {
        modelValue: {
            version: '',
            style: 'default'
        }
    }
)
const { modelValue: value } = useVModels(props, emit)

const currentModel = ref<string>('mj')
const modelList: any = [
    {
        name: 'Midjourney',
        value: 'mj',
        desc: '真实感强',
        background: Mj
    },
    {
        name: 'Niji',
        value: 'niji',
        desc: '卡通动漫',
        background: Nj
    }
]

const changeVersion = (val: string) => {
    currentModel.value = val
    const version = appStore?.getDrawConfig?.mj_version[val]
    props.modelValue.version = Object.keys(version)[0]
    console.log(props.modelValue.version)
}

changeVersion('mj')
</script>

<style scoped>
.model-item {
    cursor: pointer;
    width: 158px;
    height: 64px;
    padding: 1px 2px;
    border: 2px solid transparent;
    color: #ffffff;
    border-radius: 6px;
}
.model-item:first-child {
    margin-right: 4px;
}
.model-item_active {
    border: 2px solid var(--el-color-primary);
}
.model-item-bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.model-item-bg span:first-child {
    font-weight: 500;
}
</style>
